<script lang="ts" setup>
import { ref } from 'vue'
import { reactive } from 'vue'
import router from '@/router';
import { ElMessage, FormRules } from 'element-plus';
import { useRouter } from 'vue-router';
const routers = useRouter()
const sname = ref("活动版块")
const mposts = ref(0)
const rposts = ref(0)
const clicks = ref(0)
const index = ref(0)

const mpostdata = ref()
const rpostdata = ref()
const activedata = ref()
const sectiondata = ref({ "sd": '', "name": '' })

import { mpostsidServer,updatampostServer } from "@/api/mpost.js"
import { activelistServer } from '@/api/active.js';
const name = ref('')
const starttime = ref('')
const endtime = ref('')
const timeForm = "YYYY-MM-DD HH:mm:ss"

const activeData = async () => {
    let params = {
        countpage: 1,
        pagenumber: 100,
        name: name.value ? name.value : null,
        starttime: starttime.value ? moment(starttime.value).format(timeForm) : null,
        endtime: endtime.value ? moment(endtime.value).format(timeForm) : null
    }

    let result = await activelistServer(params)

    activedata.value = result.data.items
}

activeData()

const sectionData = async () => {
    let params = {
        countpage: 1,
        pagenumber: 5,
    }

    let result = await sectionlistServer(params)

    sectiondata.value = result.data.items[index.value]
}

sectionData()

import { rpostsidServer } from "@/api/rpost.js"
import { sectionlistServer } from '@/api/section.js';
import moment from 'moment';

const clickserver = async (data)=>{
    data.clicks = data.clicks + 1
    clicks.value = clicks.value + 1
    let result = await updatampostServer(data.mid,data) as any;
    ElMessage.success(result.message ? result.message : '点击成功')
    routers.push({path:'/home/post/' + (data.mid-1)})

}

const join = async ()=>{
    ElMessage.success('参加成功')
}
</script>
<template>
    <div class="active">
        <el-container>
            <el-header>
            </el-header>
            <el-main>
                <el-page-header style="margin-left: 170px;">
                    <template #breadcrumb>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/home' }">
                                首页
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>版块</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/home/active' }"><a>{{ sname }}</a></el-breadcrumb-item>
                        </el-breadcrumb>
                    </template>
                    <template #content>
                        <span> 诗词交流平台 </span>
                    </template>
                </el-page-header>
                <el-card style="margin-left: 170px;margin-top: 20px;display: flex;">
                    <el-row style="display: flex;">
                        <el-text tag="b" size="large" type="primary" style="margin-right: 40px;">活动版块</el-text>
                        <el-text tag="p" size="small" type="info" style="margin-left: 150px;">
                            {{ sectiondata.sd }}</el-text>
                    </el-row>
                </el-card>
                <el-card style="margin-left: 170px;margin-top: 20px;display: flex;" router v-for="data in activedata">
                        <el-text tag="b" size="large" type="primary"
                            style="width: 50px;">[活动]</el-text>
                        <el-button  text style="margin-left: 10px;" @click="clickserver(data)">{{
                            data.name }}</el-button>
                        <el-divider />
                        <el-text tag="i" size="default" type="success"
                            style="margin-right: 5px;margin-left: 5px;margin-bottom: 20px;">描述:</el-text>
                        <el-text tag="i" size="default" type="info" style="margin-right: 5px;margin-left: 5px;">{{ data.bi }}</el-text>
                        <el-divider />
                        <el-text tag="i" size="large" type="primary"
                            style="width: 100px;">开始时间：</el-text>
                        <el-text tag="i" size="small" type="info" style="margin-left: 10px;margin-right: 0px;">
                            {{ moment(data.starttime).format('YYYY-MM-DD HH:mm') }}</el-text>
                        <el-text tag="i" size="large" type="primary"
                            style="width: 100px;margin-left: 100px;">结束时间：</el-text>
                        <el-text tag="i" size="small" type="info" style="margin-left: 10px;margin-right: 0px;">
                            {{ moment(data.finaltime).format('YYYY-MM-DD HH:mm') }}</el-text>
                            <el-text tag="i" size="large" type="primary"
                            style="width: 100px;margin-left: 100px;">限制条件：</el-text>
                        <el-text tag="i" size="small" type="info" style="margin-left: 10px;margin-right: 0px;">
                            {{ data.description }}</el-text>
                        <el-button  round style="margin-left: 80px;" @click="join()" type="success">参加活动</el-button>
                        <div style="margin-top: 20px;margin-bottom: 20px;">
                            <hr>
                        </div>
                </el-card>
            </el-main>
            <el-footer>
            </el-footer>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.active {
    height: 100%;

    .el-header {
        background: url('@/assets/section.jpg') no-repeat center / cover;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100px;


    }

    .el-main {
        background-color: #D1CFB9;
       

        .el-row {

            display: flex;
            align-items: center;
            justify-content: space-between;

            .el-col {
                text-align: center;
            }
        }

    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #D1CFB9;
        height: 100px;
    }

}
</style>